/**
 * 我的画像-年度盘点
 */
import { Col, Radio, Row, Spin, Button,Steps, QueueAnim, Carousel } from "antd";
import { WeaLocaleProvider } from "ecCom";
import React from "react";
import { inject, observer } from 'mobx-react';
import * as Util from "../../../util/Util";
const Step = Steps.Step;
const getLabel = WeaLocaleProvider.getLabel;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;
const getUserLanguage = WeaLocaleProvider.getUserLanguage;

@inject('yearInventoryStore')
@observer
export default class YearInventoryView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showIndex: 0,
            yearIndex: 0,
            mainid: '',
            userid: '',
            hasRight: true,
            imgFolder: '2019',
            ...props,
            viewHeight: window.innerHeight,
            viewWidth:'',
        };
        this.store = this.props.yearInventoryStore
        this.startY=-1
        this.endY=-1
    }
    componentDidMount(){
        let {onRef} = this.props
        if(onRef){
            this.props.onRef(this)
        }
    }
    componentWillMount() {
        //传入高度
        this.setState({ viewHeight: this.props.viewHeight,viewWidth:this.props.viewWidth ,mainid:this.props.mainid,userid:this.props.userid})
    }
    componentWillReceiveProps(next) {
        if (next.userid != this.state.userid) {
            this.setState({ userid: next.userid, showIndex: -1 }, () => { this.setState({ showIndex: 0 }) })
            this.store.getYearInventoryValue({ mainid: next.mainid, userid: next.userid })
        }
        if (next.mainid != this.state.mainid) {
            this.setState({ mainid: next.mainid, showIndex: -1 }, () => { this.setState({ showIndex: 0 }) })
            this.store.getYearInventoryValue({ mainid: next.mainid, userid: next.userid })
        }

    }


    /*手接触屏幕*/
    handleTouchStart = (e) => {
        this.startY = e.touches[0].clientY;
    };
    /*手在屏幕上移动*/
    handleTouchMove = (e) => {
        this.endY = e.touches[0].clientY;
    };
    /*手离开屏幕*/
    handleTouchEnd = (e) => {
        // 获取滑动范围
        if(this.startY>-1 && this.endY>-1){
            let distance = Math.abs(this.startY - this.endY);
            if (distance > 50) {
                if (this.startY > this.endY) {
                    this.nextPage()
                } else {
                    this.prePage()
                }
            }
        }
        
        this.startY=-1
        this.endY=-1
    };
    prePage=()=>{
        let {showIndex} = this.state
        if(showIndex>0){
            showIndex--
            this.setState({showIndex})
        }
    }
    nextPage=()=>{
        let {showIndex} = this.state
        if(showIndex< 8){
            showIndex++
            this.setState({showIndex})
        }
        

    }
    render() {
        const settings = {
            vertical: true,
            verticalSwiping: true,
        };
        let { viewHeight,viewWidth } = this.state
        let phoneHeight = viewHeight|| window.innerHeight
        let phoneWidth = viewWidth || window.innerWidth
        let {showIndex,yearIndex,hasRight,imgFolder} = this.state
        let {username,loading,scheduleData,wfData,messageData,docData,yearList} = this.store
        return (
            <div className={"wea-wr-portrait-year-inventory-view"}
                onTouchStart={this.handleTouchStart}
                onTouchMove={this.handleTouchMove}
                onTouchEnd={this.handleTouchEnd}
                style={{height:(phoneHeight),width:(phoneWidth)}}
                >
                { <div className={"wea-wr-portrait-year-inventory-show-page-phone"} style={{height:(phoneHeight),width:(phoneWidth)}}>
                {/* <img src={this.getImgUrl(imgFolder,'shouji')} className={'wea-wr-portrait-year-inventory-show-page-phone-img'}></img> */}
                                {/* 首页 */}
                                {showIndex == 0 && <QueueAnim ecId={`${this && this.props && this.props.ecId || ''}_QueueAnim@ljjits`} delay={100} duration={500} type="bottom" className={"wea-wr-portrait-year-inventory-show-page-item"} >
                                    <div key={'index'} className={"wea-wr-portrait-year-inventory-show-page-item-name"}>
                                        {username}
                                    </div>
                                    <div  key={'indeximg'} className={"wea-wr-portrait-year-inventory-show-page-item-welcome"}>
                                        <img
                                            src={this.getImgUrl(imgFolder,'welcome')}
                                        ></img>
                                    </div>
                                </QueueAnim>}
                                {/* 考勤第一页 */}
                                {showIndex == 1 && this.buildDataPage(1,this.getImgUrl(imgFolder,'head2'),this.getImgUrl(imgFolder,'center2'),[
                                    <span>在总共
                                        <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                        {this.getValueByIndex(scheduleData,10)||0}
                                        </span>
                                    个工作日
                                    </span>,
                                ],[
                                    <span>
                                        你请了
                                        
                                        <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                        {this.getValueByIndex(scheduleData,1||0)}
                                            </span>
                                        天病假
                                    </span>,
                                    <span>
                                         {(this.getValueByIndex(scheduleData,4)==0||!this.getValueByIndex(scheduleData,4))?"没有迟到":"迟到了"+this.getValueByIndex(scheduleData,4)+"次"}
                                            {(this.getValueByIndex(scheduleData,5)==0||!this.getValueByIndex(scheduleData,4))?"没有早退":"早退了"+this.getValueByIndex(scheduleData,4)+"次"}
                                    </span>,
                                    <span>
                                        请了
                                        <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                            {this.getValueByIndex(scheduleData,2)||0}
                                            </span>
                                        天年假<span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                        {this.getValueByIndex(scheduleData,3)||0}
                                            </span>
                                        天事假
                                    </span>
                                ])}
                                {/* 第二页 */}
                                {showIndex == 2 && this.buildDataPage(2,this.getImgUrl(imgFolder,'head3'),this.getImgUrl(imgFolder,'center3'),[
                                    <span>你总共打卡了
                                    <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    {this.getValueByIndex(scheduleData,7)||0}
                                    </span>
                                    次
                                    </span>
                                ],[
                                    <span>
                                        使用外勤签到
                                        <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                        {this.getValueByIndex(scheduleData,8)||0}
                                            </span>
                                        次
                                    </span>
                                ])}
                                {/* 流程创建 */}
                                {showIndex == 3 && this.buildDataPage(3,this.getImgUrl(imgFolder,'head5'),this.getImgUrl(imgFolder,'center5'),[
                                    // <span>你发起的流程超过了公司
                                    // <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    // {this.getValueByIndex(scheduleData,7)}
                                    // </span>
                                    // 的人
                                    // </span>
                                ],[
                                    <span>
                                        你总共发起了
                                        <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                        {this.getValueByIndex(wfData,1)||0}
                                            </span>
                                        条流程
                                    </span>,
                                    <span>
                                    其中
                                    <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    {this.getValueByIndex(wfData,2)||0}
                                        </span>
                                    条为移动端发起的
                                </span>
                                ])}
                                {/* 流程处理 */}
                                {showIndex == 4 && this.buildDataPage(4,this.getImgUrl(imgFolder,'head4'),this.getImgUrl(imgFolder,'center4'),[
                                    // <span>你的流程处理总数超过了公司里
                                    // <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    // {this.getValueByIndex(scheduleData,7)}
                                    // </span>
                                    // 的人
                                    // </span>
                                ],[
                                    <span>
                                        你总共处理了
                                        <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                        {this.getValueByIndex(wfData,4)||0}
                                            </span>
                                        条流程
                                    </span>,
                                    <span>
                                    其中
                                    <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    {this.getValueByIndex(wfData,5)||0}
                                        </span>
                                    条为移动端处理的
                                </span>
                                ])}
                                {/* 知识贡献 */}
                                {showIndex == 5 && this.buildDataPage(5,this.getImgUrl(imgFolder,'head6'),this.getImgUrl(imgFolder,'center6'),[
                                    // <span>你的知识贡献排名超过了公司
                                    // <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    // {this.getValueByIndex(scheduleData,7)}
                                    // </span>
                                    // 的人
                                    // </span>
                                ],[
                                    <span>
                                        你总共贡献了
                                        <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                        {this.getValueByIndex(docData,1)||0}
                                            </span>
                                        篇文档
                                    </span>,
                                    <span>
                                    总共有
                                    <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    {this.getValueByIndex(docData,2)||0}
                                        </span>
                                    人来看过你的文档
                                </span>
                                ])}
                                {/* 知识互动 */}
                                {showIndex == 6 && this.buildDataPage(6,this.getImgUrl(imgFolder,'head7'),this.getImgUrl(imgFolder,'center7'),[
                                    // <span>你的知识互动排名超过了公司
                                    // <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    // {this.getValueByIndex(scheduleData,7)}
                                    // </span>
                                    // 的人
                                    // </span>
                                ],[
                                    <span>
                                        你为
                                        <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                        {this.getValueByIndex(docData,3)||0}
                                            </span>
                                        篇文档点过赞
                                    </span>,
                                    <span>
                                    给
                                    <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    {this.getValueByIndex(docData,4)||0}
                                        </span>
                                    篇文档发表了评论
                                </span>
                                ])}
                                {/* 消息记录 */}
                                {showIndex == 7 && this.buildDataPage(7,this.getImgUrl(imgFolder,'head8'),this.getImgUrl(imgFolder,'center8'),[
                                    <span>你和
                                    <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    {this.getValueByIndex(messageData,1)||0}
                                    </span>
                                    个人发起过聊天，在
                                    <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    {this.getValueByIndex(messageData,2)||0}
                                    </span>
                                    个群聊中沟通过工作事宜
                                    </span>
                                ],[
                                    <span>
                                        共发起
                                        <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                        {this.getValueByIndex(messageData,3)||0}
                                            </span>
                                        条消息
                                    </span>,
                                    <span>
                                    收到
                                    <span className={"wea-wr-portrait-year-inventory-show-page-item-keyword-value"}>
                                    {this.getValueByIndex(messageData,4)||0}
                                        </span>
                                    条消息,
                                </span>
                                ])}
                                {/* 总成绩单 */}
                                {showIndex==8 && <QueueAnim ecId={`${this && this.props && this.props.ecId || ''}_QueueAnim@lo1xn8`} delay={500} duration={1000} type="bottom" className={"wea-wr-portrait-year-inventory-show-page-summary"} style={{backgroundImage:`url(${this.getImgUrl(imgFolder,'center9')})`,backgroundSize:"100% 100%" }}>
                                        <div key={"summary"} className={"wea-wr-portrait-year-inventory-show-page-summary-text-area"} style={{paddingTop:(phoneHeight*0.4+"px"),fontSize:(phoneHeight/45+'px')}}>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@a7zq9f`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@derhmp`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-left wea-wr-portrait-year-inventory-show-page-summary-title"}>科目</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xeyow5`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-right wea-wr-portrait-year-inventory-show-page-summary-title"}>排名</Col>
                                            </Row>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@fn8lbv`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bamel1`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-left"}>出勤率</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kdjuak`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-right"}>{this.getValueByIndex(scheduleData,11)||1}</Col>
                                            </Row>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@no7zt1`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@dj04xa`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-left"}>流程发起数</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j784kq`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-right"}>{this.getValueByIndex(wfData,15)||1}</Col>
                                            </Row>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@a9jcbi`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kim2wt`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-left"}>流程处理量</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lohrcv`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-right"}>{this.getValueByIndex(wfData,16)||1}</Col>
                                            </Row>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@10dwdu`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@r8sk69`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-left"}>知识贡献数</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ye1tch`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-right"}>{this.getValueByIndex(docData,8)||1}</Col>
                                            </Row>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@a3y2zb`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@c168do`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-left"}>知识互动</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@sef41s`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-right"}>{this.getValueByIndex(docData,9)||1}</Col>
                                            </Row>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@x1a2wa`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xoaypb`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-left"}>收发消息</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d0i4bx`} span="12" className={"wea-wr-portrait-year-inventory-show-page-summary-text-right"}> {this.getValueByIndex(messageData,10)||1}</Col>
                                            </Row>
                                            
                                            
                                        </div>
                                   
                                </QueueAnim> }
                                {/* 值得纪念的一天 */}
                                {/* {showIndex==9 && <QueueAnim delay={500} duration={1000} type="bottom" className={"wea-wr-portrait-year-inventory-show-page-summary"} style={{backgroundImage:`url(${center11})`,backgroundSize:"100% 100%" }}>
                                </QueueAnim> } */}
                            </div>}
            </div>
        )
    }

    buildDataPage=(index,headImg,mainImg,middleText,bottomText)=>{
        let {showIndex} = this.state
        let {scheduleData} =this.store
        return <QueueAnim ecId={`${this && this.props && this.props.ecId || ''}_QueueAnim@uhzkn7`} delay={500} duration={1000} type="bottom" className={"wea-wr-portrait-year-inventory-show-page-item"} >
                <div key={'headimg'} className={"wea-wr-portrait-year-inventory-show-page-item-head-img"}>
                    <img
                        src={headImg}
                    ></img>
                </div>
                <div key={'mainimg'}  className={"wea-wr-portrait-year-inventory-show-page-item-main-img"}>
                    <img
                        src={mainImg}
                    ></img>
                </div>
                {
                    middleText.map((m,i)=>{
                        return <div key={"middle"+i} className={"wea-wr-portrait-year-inventory-show-page-item-keyword"}>
                            {m}
                        </div>
                    })
                }
                {
                    <div key={'bottom'} className={"wea-wr-portrait-year-inventory-show-page-item-bottom"} style={{backgroundImage:`url(${this.getImgUrl(this.state.imgFolder,'dbackgroup')})`,backgroundSize:"100% 100%" }}>
                   { bottomText.map((m,i)=>{
                        return <div className="wea-wr-portrait-year-inventory-show-page-item-bottom-text">
                            {m}
                        </div>

                      
                    })}
                    </div>
                }
               </QueueAnim>
    }
    //获取图片地址
    getImgUrl = (folderName,imageName,suffix)=>{
        return '/workrelate/images/yearInventory/'+folderName+'/'+imageName+"."+(suffix||'png')
    }
    getValueByIndex=(valueArr,index)=>{
        if(valueArr && valueArr.length>0){
            for(var i=0;i<valueArr.length;i++){
                if(valueArr[i].prjid == index){
                    return valueArr[i].value
                }
            }
        }
        return null
    }
}